<template>
	<view class="filterBox" v-if="isShowCapsule">
		<view :class="['typeItem', typeIndex == 1 ? 'act' : '']" @click="changeType(1)" :style="{borderRight:typeIndex==2?'none':''}">
			<image class="ico" src="@/static/images/statistics/pie_act.png" v-if="typeIndex == 1" mode=""></image>
			<image class="ico" src="@/static/images/statistics/pie_def.png" v-else mode=""></image>
			数量
		</view>
		<view :class="['typeItem', typeIndex == 2 ? 'act actRight' : '']" @click="changeType(2)">
			<image class="ico" src="@/static/images/statistics/line_act.png" v-if="typeIndex == 2" mode=""></image>
			<image class="ico" src="@/static/images/statistics/line_def.png" v-else mode=""></image>
			趋势
		</view>
	</view>
</template>

<script>
export default {
	name:'capsule',
	props:{
		typeIndex:{
			type:[Number,String],
			default:1
		},
		// 是否显示整个卡片
		isShowCapsule:{
			type:Boolean,
			default:true
		},
	},
	data() {
		return {
				
		};
	},
	methods:{
		changeType(idx) {
			this.$emit('change',idx);
		}
	}
};
</script>

<style lang="scss" scoped>
	.filterBox {
		display: flex;
		font-size: 24rpx;
		color: #666;
		.typeItem {
			width: 112rpx;
			height: 56rpx;
			border: 2rpx solid #d5d5d5;
			display: flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;
			transition: .3s all;
			.ico{
				width: 28rpx;
				height: 28rpx;
				padding-right: 10rpx;
			}
		}
		.typeItem:nth-child(1) {
			border-radius: 28rpx 0rpx 0rpx 28rpx;
		}
		.typeItem:nth-child(2) {
			border-radius: 0rpx 28rpx 28rpx 0rpx;
			border-left: none;
		}
		.act {
			background: #dcf0ff;
			border-color: #0091ff;
			color: #0091ff;
		}
		.actRight {
			border-left: 2rpx solid !important;
		}
	}
</style>